<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				padding:0;
				margin:0;
			}
			form{
				width: 600px;
				margin: 100px auto;
				background: #333;
				padding: 10px 20px;
				position: relative;
			}
			p{
				font: 12px "";
				color: #fc0;
			}
			span{
				color: red;
			}
			fieldset{
				border: 0;
				margin: 12px 48px;
			}
			legend{
				color: #09c;
				font: 700 16px "";
				margin-bottom: 30px;
			}
			div.row {
				margin-bottom: 18px;
			}
			label{
				color: #ccc;
				font: 12px "";
				margin: 0 50px 0 30px;
			}
			input {
				width: 230px;
				height: 24px;
				border-radius: 5px;
				outline: none;
				border: 0;
				background: #999;
				position: relative;
				top: -4px;
			}
			input#yzm {
				width: 80px;
			}
			input#xsyzm {
				width: 80px;
				height: 22px;
				border-radius: 0;
				background: #fff;
				margin-left: 8px;
				border: 1px solid #999;
				text-align: center;
			}
			i{
				display: inline-block;
				width: 60px;
				height;22px;
				background: #fff;
				text-align: center;
				color: #fff;
			}
			i.active{
				background: #090;
			}
			#login{
				width: 300px;
				margin: 0 auto;
			}
			#btn{
				width: 100px;
				height: 38px;
				color: #fff;
				border: 1px solid #999;
				background: #2c67b5;
				margin-left: 60px;
			}
			#checkout{
				width: 15px;
				height: 15px;
				border: 1px solid #999;	
				margin-left: 20px;			
			}
			#check{
				font: 12px "";
				color: #fff;
				margin: 0;
				position: relative;
				top: -8px;
				left: 2px;
				border-radius: 2px;
			}
			b{
				color: red;
			}
			#alert{
				position: absolute;
				top: 16px;
				left: 240px;
				padding: 6px 10px;
				background: #fa5;
				border-radius: 6px;
				display: none;
			}
		</style>
	</head>
	<body>
		<form>
			<p>注意<span>*</span>为必填项</p>
			<fieldset class="count_info">
				<legend>账户详细资料</legend>
				<div class="row">
					<label for="username">用户名称&emsp;&emsp;</label>
					<span>*</span>
					<input id="username" type="text" placeholder="数字、字母、下划线、长度不小于6"/>
					<b></b>
				</div>
				<div class="row">
					<label for="psw">密码登录&emsp;&emsp;</label>
					<span>*</span>
					<input id="psw" type="password" placeholder="请输入6-20位的密码"/>
					<b></b>
				</div>
				<div class="row">
					<label for="repsw">重复密码登录</label>
					<span>*</span>
					<input id="repsw" type="password" placeholder="请再输入一次密码"/>
					<b></b>
				</div>
				<div class="row">
					<label>密码安全级别</label>
					<span>*</span>
					<i>低</i>
					<i>中</i>
					<i>高</i>
				</div>
			</fieldset>
			<fieldset class="person_info">
				<legend>个人信息资料</legend>
				<div class="row">
					<label for="email">电子邮件&emsp;&emsp;</label>
					<span>*</span>
					<input id="email" type="email" placeholder="请输入您的电子邮箱"/>
					<b></b>
				</div><div class="row">
					<label for="real_name">真实姓名&emsp;&emsp;</label>
					<span>*</span>
					<input id="real_name" type="text" placeholder="请输入2-5位的中文"/>
					<b></b>
				</div>
				<div class="row">
					<label for="tel">中奖手机通知</label>
					<span>*</span>
					<input id="tel" type="tel"/>
					<b></b>
				</div>
				<div class="row">
					<label for="yzm">验证码&emsp;&emsp;&emsp;</label>
					<span>*</span>
					<input id="yzm" type="text"/>
					<input type="text" id="xsyzm" value="3678"/>
					<b></b>
				</div>
			</fieldset>
			<div id="login">
				<input type="button" id="btn" value="注册" />
				<input type="checkbox" id="checkout"/><label for="checkout" id="check">10天内免登录</label>
			</div>
			<div id="alert"></div>
		</form>
		<script>
			var inputArr = document.getElementsByTagName('input');
			var bArr = document.getElementsByTagName('b');
			var iArr = document.getElementsByTagName('i');
			var alert = document.getElementById('alert');
			inputArr[0].onchange = function(){
				if(this.value.length < 6){
					bArr[0].innerHTML = '';
					alert.style.display = 'block';
					if(this.value.length == 0){
						alert.innerHTML = '请输入密码！'
					}
					alert.innerHTML = '用户名长度太短！'
				}else{
					var reg = /^([0-9a-zA-Z\_])+$/;
					if(reg.test(this.value)){
						alert.style.display = 'none';
						bArr[0].innerHTML = '√';
					}else{
						alert.style.display = 'block';
						alert.innerHTML = '用户名输入有误，请重新输入！'
					}
				}
			}
			
			// 密码验证
			function charMode(char){
				//48-57 数字 65-90 大写字母  97-122 小写字母
				if(char>=48&&char<=57){
					return 1;
				}else if(char>=65&&char<=90){
					return 2;
				}else if(char>=97&&char<=122){
					return 4;
				}else{
					return 8;
				}
			}
			inputArr[1].oninput = function(){
				var val = this.value;
				var end1 = 0,
					end2 = 0,
					end3 = 0,
					end4 = 0,
					result = 0;
				if(val.length == 0){
					for(var i=0; i<iArr.length; i++){
							iArr[i].style.background = '#fff';
						}
					bArr[1].innerHTML = '';
				}
				else if(val.length < 6 && val.length >= 1){
					for(var i=0; i<iArr.length; i++){
							iArr[i].style.background = '#fff';
						}
					bArr[1].innerHTML = '';
					alert.style.display = 'block';
					alert.innerHTML = '密码长度不够！'
				}else if(val.length > 20){
					for(var i=0; i<iArr.length; i++){
							iArr[i].style.background = '#fff';
						}
					bArr[1].innerHTML = '';
					alert.style.display = 'block';
					alert.innerHTML = '密码太长！'
				}else{
					alert.style.display = 'none';
					bArr[1].innerHTML = '√';
					for(var i=0; i<val.length;i++){
						if(charMode(val.charCodeAt(i)) == 1){
							end1 = 1;
						}else if(charMode(val.charCodeAt(i)) == 2){
							end2 = 1;
						}else if(charMode(val.charCodeAt(i)) == 4){
							end3 = 1;
						}else if(charMode(val.charCodeAt(i)) == 8){
							end4 = 1;
						}					
						result = end1 + end2 + end3 + end4;					
					}
					if(result <= 2&&result >= 1){
						for(var i=0; i<iArr.length; i++){
							iArr[i].style.background = '#fff';
						}
						iArr[0].style.background = 'red';
					}else if(result == 3){
						for(var i=0; i<iArr.length; i++){
							iArr[i].style.background = '#fff';
						}
						iArr[1].style.background = 'orange';
					}else if(result == 4){
						for(var i=0; i<iArr.length; i++){
							iArr[i].style.background = '#fff';
						}
						iArr[2].style.background = 'green';
					}			
				}
			}
			inputArr[2].onchange = function(){
				var val = inputArr[1].value,
					reVal = inputArr[2].value;
				if(val == reVal){
					bArr[2].innerHTML = '√';
					alert.style.display = 'none';
				}else {
					bArr[2].innerHTML = '';
					alert.style.display = 'block';
					alert.innerHTML = '两次密码输入不一致！'
				}
			}
			// 电子邮箱
			inputArr[3].onchange = function(){
				var regEmail = /^(\w[\w\-]+)@[\w\-]+\.[\w\-]+$/;
				if(regEmail.test(this.value)){
					alert.style.display = 'none';
					bArr[3].innerHTML = '√';
				}else{
					bArr[3].innerHTML = '';
					alert.style.display = 'block';
					alert.innerHTML = '邮箱输入有误，请重新输入！'
				}
			}
			
			inputArr[4].onchange = function(){
				var regChina = /^[\u4e00-\uf9a5]{2,5}$/;
				if(regChina.test(this.value)){
					alert.style.display = 'none';
					bArr[4].innerHTML = '√';
				}else{
					bArr[4].innerHTML = '';
					alert.style.display = 'block';
					alert.innerHTML = '输入有误，请重新输入！'
				}
			}
			
			inputArr[5].onchange = function(){
				var regTel = /^1[35678]\d{9}$/;
				if(regTel.test(this.value)){
					alert.style.display = 'none';
					bArr[5].innerHTML = '√';
				}else{
					bArr[5].innerHTML = '';
					alert.style.display = 'block';
					alert.innerHTML = '输入有误，请重新输入！'
				}
			}
			
			// 验证码
			// 数字字母混合验证码
			var xsyzm = document.getElementById('xsyzm'); 
			function yzmFn(){
				var arr = [];
				var strs = '';
				for(var i=0; i < 10; i++){
					arr.push(i);
				}
				for(var i = 97; i < 123; i++){
					arr.push(String.fromCharCode(i));
				}
				for(var i=0; i<4; i++){
					var randomIndex = Math.floor(Math.random()*arr.length);
					var str = arr[randomIndex];
					if(randomIndex>9){
						Math.random() > .5 ? str = str.toUpperCase() : str = str;
					}
					strs += str;
				}
				return strs;
			}
			xsyzm.onclick = function(){
				this.value = yzmFn();
			}
			inputArr[6].onchange = function(){
				var yz = this.value,
					yzyz = inputArr[7].value;
				if(yz == yzyz){
					alert.style.display = 'none';
					bArr[6].innerHTML = '√';
				}else{
					bArr[6].innerHTML = '';
					alert.style.display = 'block';
					alert.innerHTML = '验证码输入有误，请重新输入！'
				}
			}
			inputArr[8].onclick = function(){
				var bbb = true;
				for(var i=0; i<bArr.length;i++){
					if(bArr[i].innerHTML != '√'){
						bbb = false;
						break;
					}
				}
				if(bbb == true){
					alert.style.display = 'block';
					alert.innerHTML = '注册成功！'
				}else{
					alert.style.display = 'block';
					alert.innerHTML = '还有必填项未填！'
				}
			}
		</script>
	</body>
</html>
